<template>
	<view class="">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="list">
			<view class="li" v-for="(item, index) in dataList" :key="index">
				<view class="title">
					<view class="left">
						<text>预约号：{{item.order_no}}</text>
					</view>
					
					<view class="right">
						<text>{{item.status ? '已成功' : '已取消'}}</text>
					</view>
				</view>
				
				<view class="info">
					<view class="item">
						<text>预约项目</text>
						<text>{{item.title}}</text>
					</view>
					<view class="item">
						<text>服务网点</text>
						<text>{{item.outlets}}</text>
					</view>
					<view class="item">
						<text>预定日期</text>
						<text>{{item.reserve_date}}</text>
					</view>
			
				</view>
				
				
				<view class="mod">
					<view class="left">
						<text>预约时间：</text>
						<text>{{item.add_time}}</text>
					</view>
					
					<view class="right" v-if="type != 'staff'">
						<button @click="onCancel(item)" v-if="item.status == 1">取消</button>
					</view>
				</view>
			</view>
			
		</view>
		
		
		</z-paging>
	</view>
</template>

<script>
	import { getCardRecordList, setCardCancelyy } from '@/api/reserve.js';
	export default {
		data() {
			return {
				dataList: [],
				id: '',
				type: '',
				baseUrl: this.$baseUrl
			}
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id;
			}
			
			if (ops.type) {
				this.type = ops.type;
			}
		},
		onShow() {
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onCancel(item) {
				setCardCancelyy({
					id: item.id
				}).then(res => {
					this.$util.Tips({
						title: res.msg,
						icon: 'success'
					});
					
					this.$refs.paging.reload()
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize,
					cid: this.id,
					type: this.type
				}
				getCardRecordList(params).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			}
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	
	.list {
		padding: 30rpx;
		.li {
			width: 702rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 44rpx 0rpx rgba(0,0,0,0.07);
			padding: 15rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.info {
				padding: 15rpx;
				.item {
					font-weight: 400;
					font-size: 22rpx;
					color: #333333;
					margin-top: 16rpx;
					text {
						&:nth-child(2) {
							font-weight: 350;
							font-size: 22rpx;
							color: #545454;
						}
					}
				}
			}
			.mod {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx;
				border-top: 2rpx solid #F1F1F1;
				.left {
					font-weight: 400;
					font-size: 22rpx;
					color: #333333;
					txet {
						&:nth-child(2) {
							font-weight: 350;
							font-size: 22rpx;
							color: #545454;
						}
					}
				}
				.right {
					button {
						width: 110rpx;
						height: 42rpx;
						background: #FFFFFF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 1rpx solid #2F51AC;
						font-weight: 350;
						font-size: 20rpx;
						color: #2F51AC;
						text-align: center;
						line-height:  40rpx;
						background-color: initial;
					}
				}
			}
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx;
				border-bottom: 2rpx solid #F1F1F1;
				.left {
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
				}
				.right {
					font-weight: 350;
					font-size: 20rpx;
					color: #FF2B2B;
				}
			}
		}
	}
</style>